<!-- 标注提醒组件 -->
<template>
    <span class="red_tips" v-if="tipsNum">{{remindNum}}</span>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    @Component({})
    export default class MarkRemind extends Vue {
        @Prop() tipsNum: string|number;
        get remindNum () {
            if(this.tipsNum < 100){
                return this.tipsNum
            }else {
                return '99+'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .red_tips {
        display: inline-block;
        text-align: center;
        color: #fff;
        background: #E84F5A;
        width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 50%;
        vertical-align: baseline;
        margin-left: 8px;
        font-size: 12px;
    }
</style>